<template>
  <div
    class="xiang"
    :style="{
      backgroundImage: `url(${
        shopinfo.info && shopinfo.info.poi_back_pic_url
      })`,
    }"
  >
    <van-nav-bar
      title="店铺详情"
      left-text="返回"
      right-text="收藏"
      left-arrow
      @click-left="$router.go(-1)"
      
    />
    <div class="hang2">
      <div>
        <img class="logo" :src="shopinfo.info && shopinfo.info.picUrl" alt="" />
        <span class="smin">{{ shopinfo.info && shopinfo.info.name }}</span>
      </div>
      <van-icon
        name="like"
        class="vai1"
        size="30"
      
      />
    </div>
    <div class="hang3">
      <span class="iconfont icon-fangdajing">搜索</span>
      <span
        @click="handclick(index)"
        v-for="(item, index) in list"
        :key="index"
        :class="{ active: xiabiao == index }"
        >{{ item.text }}</span
      >
    </div>
    <div class="xuan">
      <div class="left">
        <div
          @click="handlist(index)"
          v-for="(item, index) in shopinfo.taglist && shopinfo.taglist"
          :key="index"
          :class="{ active: xiabiao2 == index }"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="right">
        <div class="zi">热销</div>
        <div
          class="ran"
          v-for="(ite, inde) in shopinfo.taglist &&
          shopinfo.taglist[xiabiao2].goodlist"
          :key="inde"
        >
          <div class="dig"><img :src="ite.picture" alt="" /></div>
          <div class="nei">
            <div class="h1">{{ ite.name }}</div>
            <div class="h2">
              {{ ite.month_saled_content }}&nbsp;&nbsp;{{
                ite.promotion_info
              }}&nbsp;&nbsp;{{ ite.unit }}
            </div>
            <div class="h3">
              <div class="sp1">¥{{ ite.min_price }}</div>
              <div class="sp2">
                <span class="sp">+</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 自定义图标 -->
  </div>
</template>

<script setup>
import { shop_shopinfo } from "@/api";
import {ref,onMounted} from 'vue'
import { useRoute } from 'vue-router'
var shu=ref('')
var meng=ref('')
var t=ref('')
var shoucangu=ref(false)
var xiabiao=ref(0)
var shopinfo=ref({})
var goushu=ref({})
var xiabiao2=ref(0)
var list=ref([
        { id: 1, text: "点餐" },
        { id: 2, text: "评价4.5" },
        { id: 3, text: "商家" },
      ])
var t=JSON.parse(localStorage.getItem("userinfo"));
var $route = useRoute()
onMounted(()=>{
  shop_shopinfo({ id: $route.params.id }).then((res) => {
      if (res.data.code == 200) {
        shopinfo.value = res.data.shopinfo;
      } 
    });
})
var handclick=(index)=>{
  xiabiao.value = index;
}
var handlist=(index)=>{
  xiabiao2.value = index;
}
 
  
</script>

<style scoped>
.xiang {
  height: 190px;
  /* line-height: 30px; */
  padding: 10px;
}

.hang2 img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}
.smin {
  font-size: 16px;
  color: white;
  font-weight: bold;
}
.hang3 {
  height: 60px;
  line-height: 60px;
  font-size: 22px;
  padding: 10px;
  color: white;
}
.hang3 span:nth-child(1) {
  display: inline-block;
  width: 100px;
  height: 40px;
  border-radius: 40px;
  background-color: rgba(235, 233, 233, 0.267);
  text-align: center;
  line-height: 40px;
}
.hang3 span {
  margin-right: 20px;
}
.hang3 span.active {
  display: inline-block;
  color: #138fe9;
  border-bottom: 2px solid #138fe9;
  height: 40px;
  line-height: 40px;
}
.xuan {
  display: flex;
  /* padding: 0 20px; */
  margin-top: 20px;
}
.left {
  width: 130px;
  text-align: center;
}
.left .active {
  background-color: #eee;
  color: red;
}
.left div {
  height: 60px;
  line-height: 60px;
}
.zi {
  font-size: 20px;
  font-weight: bold;
  height: 40px;
  line-height: 40px;
}
.right {
  flex: 1;
}
.ran {
  display: flex;
  height: 100px;
  margin: 20px 0;
}
.h1 {
  font-weight: bold;
}
.h2 {
  font-size: 12px;
  color: rgb(116, 112, 112);
  margin: 10px 0;
}
.h3 {
  display: flex;
  justify-content: space-between;
}
.nei {
  flex: 1;
}
.dig {
  width: 100px;
  height: 100px;
}
img {
  width: 100%;
}
.sp {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  background-color: blue;
  font-size: 20px;
  font-weight: bold;
  color: white;
}
.sp:active{
  background-color: #97c9ec;
}
.sp1 {
  float: left;
  color: red;
}
.sp2 span {
  margin: 0 5px;
}
.hang2 {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.hang2 i {
  margin-top: 15px;
}
.vai {
  color: red;
}
.vai1 {
  color: white;
}
</style>